<template>
  <div class="logs">
    <!-- 头部 -->
    <div class="logs-head">
      <el-date-picker v-model="logs_Date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
      <el-select class="logs-head-select" v-model="logs_Type" placeholder="请选择日志类型">
        <el-option v-for="item in logs_options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-button class="logs-head-btn" type="success" icon="el-icon-search" @click="handleQuery">查询</el-button>
    </div>
    <!-- 列表 -->
    <div class="logs-table">
      <el-table class="logs-table-list" v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column label="ID" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.id.slice(-8) }}
          </template>
        </el-table-column>
        <el-table-column label="操作类型" width="100" align="center">
          <template slot-scope="scope">
            <el-tag effect="dark" :color="randomColor()">
              {{ scope.row.action }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目" width="100" align="center"> </el-table-column>
        <el-table-column label="日志内容" width="400" align="center">
          <template slot-scope="scope">
            {{ scope.row.request.slice(0, 100) + '.......' }}
          </template>
        </el-table-column>
        <el-table-column prop="created_time" label="时间" width="200" align="center"> </el-table-column>
        <el-table-column prop="action" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" @click="handleOpenDialog(scope.$index, scope.row)">打开详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="table-pagination" v-if="total">
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          @prev-click="handlePrevClick"
          @next-click="handleNextClick"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 详情弹窗 -->
    <el-dialog title="查看信息" :visible.sync="dialogTableVisible">
      <div class="dialog-info">
        <div class="dialog-info-item">
          <el-row type="flex">
            <span class="dialog-info-item__label">请求参数</span>
            <json-viewer :value="info.request" :expand-depth="3"></json-viewer>
          </el-row>
        </div>
        <div class="dialog-info-item">
          <el-row type="flex">
            <span class="dialog-info-item__label">返回响应</span>
            <json-viewer :value="info.response" style="width: 100%" :expand-depth="2" sort></json-viewer>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetLogsAPI } from '@/api/logs_api.js';
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 15, // 每页显示条目个数
      total: 0, // 数据总数
      loading: true,
      info: {
        id: '',
        c_time: '',
        projectName: '',
        action: '',
        request: '',
      },
      user: '',
      logs_Date: '',
      dialogTableVisible: false,
      textarea2: '',
      logs_Type: '',
      logs_options: [
        {
          value: 'axios',
          label: 'axios请求',
        },
        {
          value: 'jump',
          label: '跳转页面',
        },
        {
          value: 'native',
          label: '原生native',
        },
        {
          value: 'error',
          label: 'Error',
        },
      ],
      tableData: [],
    };
  },
  mounted() {
    this.getLogs();
  },
  methods: {
    //请求操作列表
    async getLogs() {
      const params = {
        page: this.currentPage,
        type: 'xhr',
      };
      const res = await GetLogsAPI(params);
      let list = [];
      const { data, total } = res.result;
      data.forEach((item) => {
        list.push({
          id: item._id,
          created_time: item.created_time,
          projectName: item.projectName || 'app',
          action: item.action,
          request: item.request,
          response: item.response,
        });
      });
      this.total = total - 10;
      this.tableData = list;
      this.loading = false;
      console.log('日志列表', data);
    },
    // 跳转到指定页码
    goToPage(page) {
      // 更新当前页码
      this.currentPage = page;
      // 加载数据
      this.getLogs();
    },
    handleOpenDialog(index, row) {
      console.log('%c Line:374 🍞 index, row', 'font-size:18px;color:#ffffff;background:#666699', index, row);
      this.dialogTableVisible = true;
      this.info = {
        id: row.id,
        created_time: row.created_time,
        request: row.request ? JSON.parse(row.request) : '',
        response: row.response ? JSON.parse(row.response) : '',
      };
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getLogs();
    },
    handlePrevClick() {
      this.currentPage--;
    },
    handleNextClick() {
      this.currentPage++;
    },
    handleQuery() {
      //是否存在搜索条件
      this.currentPage = 1;
      const query_data = {
        stime: new Date(this.logs_Date[0]).getTime() || '',
        etime: new Date(this.logs_Date[1]).getTime() || '',
        type: this.logs_Type,
      };
      console.log('%c Line:176 🫥 query_data', 'font-size:18px;color:#ffffff;background:#8c7ae6', query_data);
      this.getLogs(query_data);
    },
    randomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tag--dark {
  border: none;
}
.el-table::before {
  content: '';
  position: absolute;
  background-color: #fff; /* 底部颜色 */
  z-index: 1;
}
.logs-head {
  display: flex;
  flex-direction: row;
  padding: 10px 0;
}
.logs-head-select {
  margin-left: 10px;
}
.logs-head-input {
  width: 200px;
  margin-right: 10px;
}
.logs-head-btn {
  margin-left: 10px;
}
.logs-table-list {
  height: calc(100vh - 280px);
  border-bottom: none;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logs-table__borwser {
  /*文字最多显示二行 */
  display: -webkit-box; /* 设置为基于 WebKit 的盒子模型 */
  -webkit-line-clamp: 2; /* 设置最大显示行数 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  overflow: hidden; /* 设置溢出隐藏 */
}
.dialog-info-item {
  // font-size: 20px;
  margin-bottom: 20px;
}
.dialog-info-item__label {
  display: flex;
  align-items: center;
  width: 120px;
}
.my-awesome-json-theme {
  // overflow-x: hidden;
  // // background: #0c2b52;
  // white-space: nowrap;
  // // color: #01fef4;
  // font-size: 14px;
  // font-family: Consolas, Menlo, Courier, monospace;
  .jv-ellipsis {
    // color: rgb(237, 13, 13);
    // background-color: rgb(241, 11, 11);
    // display: inline-block;
    // line-height: 0.9;
    // font-size: 0.9em;
    // padding: 0px 4px 2px 4px;
    // border-radius: 3px;
    // vertical-align: 2px;
    // cursor: pointer;
    // user-select: none;
  }

  .jv-button {
    color: #49b3ff;
  }
  ::v-deep .jv-key {
    // color: #01fef4 !important;
  }
  ::v-deep .jv-push {
    // color: #fff;
  }
  ::v-deep .jv-container .jv-code {
    padding: 0 !important;
  }
  .jv-item {
    &.jv-array {
      color: #111111;
    }
    &.jv-boolean {
      color: #fc1e70;
    }
    &.jv-function {
      color: #067bca;
    }
    &.jv-number {
      color: #fc1e70;
    }
    &.jv-number-float {
      color: #fc1e70;
    }
    &.jv-number-integer {
      color: #fc1e70;
    }
    &.jv-object {
      color: #111111;
    }
    &.jv-undefined {
      color: #e08331;
    }
    &.jv-string {
      color: #42b983;
      word-break: break-word;
      white-space: normal;
    }
  }
  .jv-code {
    padding: 0 !important;
    ::v-deep .jv-toggle {
      // color: #067bca !important;
    }
  }
  &.boxed {
    border: none;
    border-radius: 0;
  }
}
</style>
